<template>
    <div class="dai">
        <div class="cont">
            <div class="abb">
                <h1>仓库信息</h1>
                <div class="nmb">
                    <div class="nmbs">
                        输入快照ID:<el-input v-model="filters.warehouseId" clearable @blur="loadwarehouses"
                            @change="loadwarehouses"></el-input>
                    </div>
                    <div class="nmbs">
                        请选择物料ID:<el-input v-model="filters.materialId" clearable @blur="loadwarehouses"
                            @change="loadwarehouses"> </el-input>
                    </div>
                    <el-button @click="resfrom">重置</el-button>
                </div>
            </div>

            <div>
                <el-table :data="tabos" border>
                    <el-table-column label="仓库ID" prop="warehouseId"></el-table-column>
                    <el-table-column label="仓库名称" prop="warehouse.warehouseName"></el-table-column>
                    <el-table-column label="物料ID" prop="materialId"></el-table-column>
                    <el-table-column label="物料名称" prop="material.materialName"></el-table-column>
                    <el-table-column label="当前库存数量" prop="quantity" #default="scope">
                        <el-tag :type="scope.row.quantity>100 ? 'primary':'danger'">{{ scope.row.quantity}}</el-tag>
                    </el-table-column>
                </el-table>
                <el-tag v-model="zongshu" type="danger" size="normal" style="width: 150px;height: 30px;font-size: 20px;" @close="">{{ zongshu }}</el-tag>
            </div>
        </div>
    </div>

    <el-dialog v-model="insertVisible">
        <router-view @closeDialog="closeDialog">
        </router-view>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '@/api/request';
import { useRouter } from "vue-router";


const insertVisible = ref(false)

const router = useRouter();

const filters = ref({ warehouseId: '', materialId: '' });

let zongshu=ref();
const loadwarehouses = () => {
    request({
        method: "get",
        url: "inventory_s/trees",
        params: {
            materialId: filters.value.materialId,
            warehouseId: filters.value.warehouseId
        }
    }).then(res => {
        tabos.value = res.data.records
        zongshu.value=0;
        for(let i = 0 ;i<tabos.value.length;i++){
            zongshu.value+=tabos.value[i].quantity
        }
    }).catch(err => {
        console.error("请求异常:", err);
        ElMessage.error("加载失败:", err.message)
    });
    
};
onMounted(() => {
    loadwarehouses()
});


const tabos = ref([])

const resfrom = () => {
    filters.value = { warehouseId: "", materialId: "" }
    loadwarehouses();
};


let closeDialog = () => {
    insertVisible.value = false
    loadwarehouses();
    router.push('/stock/outbound');
}
</script>

<style scoped>
.nmb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
    padding: 10px 0;
}

.nmbs {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 280px;
    gap: 10px
}

.nmb span {
    width: 100px;
    text-align: right;
}

.filter-input {
    flex: 1;
    min-width: 180px;
}


.reset-btn {
    margin-left: 10px;
    white-space: nowrap;
}
</style>
